﻿$(window).load(function () {
	$(".loading").fadeOut()
})

/****/
$(document).ready(function () {
	// 设置页面加载时的字体大小
	var whei = $(window).width();
	$("html").css({ fontSize: whei / 20 });

	// 窗口大小改变时调整字体大小
	$(window).resize(function () {
		var whei = $(window).width();
		$("html").css({ fontSize: whei / 20 });
	});
});


$(function () {
	let dataRes;

	function getData() {
		return fetch('http://localhost:8088/api/data') // 返回Promise对象
			.then(response => response.json())
			.then(res => {
				dataRes = res;
				console.log(dataRes, "213123123");
				echarts_1(dataRes);//党龄分布
				echarts_2(dataRes);//age
				echarts_3(dataRes);
				echarts_4(dataRes);
				userOptions(dataRes)
			})
			.catch(error => console.error('Error fetching data:', error));
	}
	// 调用getData函数获取数据
	getData();

	/**
	 * 初始化并展示一个基于 ECharts 的柱状图，展示不同工作年限的人数分布。
	 * 图表的 X 轴显示工作年限分类，Y 轴显示对应的人数。
	 * 图表具有响应式设计，窗口大小改变时会自动调整图表大小。
	 * @function echarts_1
	 */
	function echarts_1(dataRes) {
		console.log((dataRes.partyStanding), "eacharts_1");
		var myChart = echarts.init(document.getElementById('echart1'));
		option = {
			xAxis: {
				data: Object.keys(dataRes.partyStanding[0]),
				axisLabel: {
					show: true,
					textStyle: {
						color: 'rgba(220, 220, 220, 0.8)',
						fontSize: 9.5,
					}
				},

			},
			yAxis: {
				axisLabel: {
					show: true,
					textStyle: {
						color: 'rgba(220, 220, 220, 0.8)'
					}
				},

			},
			series: [
				{
					data: Object.values(dataRes.partyStanding[0]),
					type: 'bar',
					showBackground: true,
					color: '#0532ff',
					backgroundStyle: {
						color: 'rgba(220, 220, 220, 0.8)'
					}
				}
			],
			label: {
				show: true,
			},
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		window.addEventListener("resize", function () {
			myChart.resize();
		});
	}


	function echarts_2(dataRes) {
		var myChart = echarts.init(document.getElementById('echart2'));
		var data = [];
		for (let i = 0; i < 5; ++i) {
			data.push(Math.round(Math.random() * 20));
		}
		option = {
			xAxis: {
				axisLabel: {
					show: true,
					textStyle: {
						color: 'rgba(220, 220, 220, 0.8)',
						fontSize: 9.5,
					}
				},
			},
			yAxis: {
				data: Object.keys(dataRes.usersByAgeRange[0]),
				inverse: true,
				axisLabel: {
					show: true,
					textStyle: {
						color: 'rgba(220, 220, 220, 0.8)',
						fontSize: 6,
					}
				},
			},
			series: [
				{
					realtimeSort: true,
					type: 'bar',
					data: Object.values(dataRes.usersByAgeRange[0]),
					color: '#0532ff',
					label: {
						show: true,
						position: 'right',
						valueAnimation: true
					}
				}
			],
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		window.addEventListener("resize", function () {
			myChart.resize();
		});
	}

	function echarts_3(dataRes) {
		let countPartyType = [];
		dataRes.countPartyType.forEach(item => {
			countPartyType.push({
				name: item.party_type_desc,
				value: item.record_count
			})
		})

		var myChart = echarts.init(document.getElementById('echart3'));
		option = {
			series: [
				{
					type: 'pie',
					data: countPartyType,
					radius: '60%'
				}
			],
			legend: {
				orient: "vertical",//图例的布局，水平布局、垂直布局
				x: 'right',      //可设定图例在左、右、居中
				y: 'bottom',     //可设定图例在上、下、居中
				padding: [0, 3, 0, 0],
				// type:'scroll',
				// data:count,
				// right:10,
				// top:'',
				icon: 'roundRect',
				itemWidth: 8,//图例宽度
				itemHeight: 6,//图例高度
				textStyle: {//图例字体样式
					color: "#ffffff",
					fontSize: 10,
					fontFamily: "微软雅黑"
				}
			},
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		window.addEventListener("resize", function () {
			myChart.resize();
		});
	}
	function echarts_4(dataRes) {
		let month = [];
		dataRes.monthOpints.forEach(item => {
			month.push(item.month)
		});
		let total_points = [];
		dataRes.monthOpints.forEach(item => {
			total_points.push(item.total_points)
		});
		var myChart = echarts.init(document.getElementById('echart4'));
		option = {
			xAxis: {
				data: month,
				axisLabel: {
					show: true,
					textStyle: {
						color: 'rgba(220, 220, 220, 0.8)',
						fontSize: 7.2,
					}
				},
			},
			yAxis: {

				axisLabel: {
					show: true,
					textStyle: {
						color: 'rgba(220, 220, 220, 0.8)',
						fontSize: 9,
					}
				},

			},
			series: [
				{
					data: total_points,
					type: 'bar',
					showBackground: true,
					color: '#0532ff',
					backgroundStyle: {
						color: 'rgba(220, 220, 220, 0.8)'
					}
				}
			],
			label: {
				show: true,
			},
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		window.addEventListener("resize", function () {
			myChart.resize();
		});
		/**
		 * 根据传入的数据响应，动态生成用户选项列表。
		 * @param {Object} dataRes - 包含用户选项数据的响应对象。
		 * @param {Array} dataRes.userOpints - 用户选项数组，每个选项包含创建时间、标题和积分。
		 * @example
		 * userOptions({
		 *   userOpints: [
		 *     { createTime: '2023-04-01T12:00:00Z', title: '示例标题', points: 100 },
		 *     // ...其他选项
		 *   ]
		 * });
		 */
	}
	function userOptions(dataRes) {

		// 选择所有带有类名 'dot' 的元素
		const dots = document.querySelectorAll('.dot');

		// 遍历每个选中的元素
		dots.forEach(dot => {
			// 根据类名更改文本内容
			if (dot.classList.contains('dot1')) {
				dot.parentElement.textContent = '党员：' + dataRes.countPartyType[0].record_count + '人'; // 更改第一个元素的文本
			} else if (dot.classList.contains('dot2')) {
				dot.parentElement.textContent = '支部：1个'; // 更改第二个元素的文本
			}
		});
		// 获取ul元素
		const ul = document.querySelector('.listnav1 ul');
		let index = 0;
		// 遍历userOpints数组
		dataRes.userOpints.forEach(opint => {
			if (index == 7) {
				return;
			}
			index++;
			if (opint.index > 10) {
				return;
			}
			// 创建一个新的li元素
			const li = document.createElement('li');

			// 创建并设置子元素
			const userNameSpan = document.createElement('span');
			userNameSpan.textContent = opint.userName; // 只取日期部分

			const titleSpan = document.createElement('span');
			titleSpan.textContent = opint.title ? opint.title.substring(0, 8) : '无标题'; // 截取前10个字符

			const pointsSpan = document.createElement('span');
			pointsSpan.textContent = `${opint.points}` + '分';

			const createTimeSpan = document.createElement('span');
			createTimeSpan.textContent = opint.createTime.split('T')[0]; // 只取日期部分

			// 将子元素添加到li中
			li.appendChild(userNameSpan);
			li.appendChild(titleSpan);
			li.appendChild(pointsSpan);
			li.appendChild(createTimeSpan);

			// 将li添加到ul中
			ul.appendChild(li);
		});
	}
})

// console.log(document.getElementById('timeShow'),12312312)
var timeShow = document.getElementById('timeShow');
timeShow.innerHTML = "<p style=color:red>截止" + getTime() + "</p>"

function getTime() {
	var myDate = new Date;
	var year = myDate.getFullYear(); //获取当前年
	var mon = myDate.getMonth() + 1; //获取当前月
	var date = myDate.getDate(); //获取当前日
	var h = myDate.getHours();//获取当前小时数(0-23)
	// var m = myDate.getMinutes();//获取当前分钟数(0-59)
	// var s = myDate.getSeconds();//获取当前秒
	var week = myDate.getDay();
	var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
	console.log(year, mon, date, weeks[week])
	return year + "年" + mon + "月" + date + "日";
}











